<template>
	<view @click.stop="handleShowPop(comment)" class="comment_index_container">
		<view class="user_container">
			<u-avatar :src="comment.icon" fontSize="1.8rem" size="90"></u-avatar>
			<view class="user_info">
				<view class="title">
					<view class="title_info">{{ comment.nickName }}</view>
				</view>
			</view>
		</view>
		<!-- 一级评论区域 -->
		<div class="posts_index">
			<view @click.stop="deleteComment(comment)" v-if="comment.userId == uid" class="edit">删除</view>
			<view @click.stop="reportComment(comment)" v-if="comment.userId != uid" class="edit">举报</view>
			<view class="posts_content">{{ comment.content }}</view>
			<view class="action_index">
				<view class="item_action">
					<view class="time_square">
						<span>{{ Timeformat(comment.updateTime) }}</span>
					</view>
				</view>
				<!-- 点赞按钮 -->
				<view @click.stop="likeCommentHandle(comment)" class="item_action">
					<u-icon :name="comment.isLike ? 'heart-fill' : 'heart'" :color="comment.isLike ? 'red' : ''"
						size="40"></u-icon>
					<span>{{ comment.liked }}</span>
				</view>
			</view>
			<!-- 二级评论区域 -->
			<view v-for="(v, k) in comment.childCommentList" :key="k" class="comment_second">
				<view @click.stop="deleteComment(v)" v-if="v.userId == uid" class="edit">删除</view>
				<view @click.stop="reportComment(v)" v-if="v.userId != uid" class="edit">举报</view>
				<view class="user_commentcontent">
					<u-avatar :src="v.icon" fontSize="1rem" size="40" randomBgColor></u-avatar>
					<view class="posts_content">{{ v.content }}</view>
				</view>
				<view class="action_index">
					<view class="item_action">
						<view class="time_square">
							<span>{{ Timeformat(comment.createTime) }}</span>
						</view>
					</view>
					<view @click.stop="likeCommentHandle(v)" class="item_action">
						<u-icon :name="v.isLike ? 'heart-fill' : 'heart'" :color="v.isLike ? 'red' : ''"
							size="40"></u-icon>
						<span>{{ v.liked }}</span>
					</view>
				</view>
			</view>
		</div>
		<!-- 弹出的u-popup -->
		<u-popup class="pop" :show="showpop" @open="openPop" mode="bottom" safeAreaInsetBottom closeable @close="closePop">
			<view class="popContent">	
				<u--textarea autoHeight count :maxlength="200" border="bottom" :showWordLimit="true"
					placeholder="期待您的回复" v-model="rebackContent" clearable></u--textarea>
				<u-button @click.stop="handleReback" :customStyle="{...btnStyle}" class="btn-reback">回复</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getComments,
		likeComment,
		addComment,
		deleteCommentById,
		reportCommentById,
	} from '@/api/forum.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		props: ['comment', 'blogId'],
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		data() {
			return {
				blogLikeParam: {
					isLike: false,
					liked: 0
				},
				id: null,
				keywords: null,
				commentData: {
					blogId: '',
					parentId: '',
				},
				popItem: {},
				showpop: false,
				rebackContent: '',
				btnStyle: {
					margin: '40rpx 0 0 80%',
					padding: '0 20rpx',
					width: '18%',
					float: 'right',
					fontSize: '1.2rem',
					borderRadius: '15%',
					color: '#fff',
					backgroundColor: 'rgb(60, 156, 255)',
				},
				preventClick: false,
				popupOpen: false,
				textareaStyle: {},
				params: {
					list: {},
					total: 0
				},
				answerData: {
					blogId: '',
					parentId: '',
					content: ''
				},
				inputShow: false,
			}
		},
		methods: {
			openPop(e, item) {
				this.rebackContent = "";
			},
			closePop() {
				this.showpop = false;
			},
			handleReback() {
				if (this.rebackContent == ""||!this.rebackContent ) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				this.commentData.blogId = this.popItem.blogId
				this.commentData.parentId = this.popItem.answerId
				uni.getProvider({
					service: 'oauth'
				}).then(providerData=>{
					let provider = providerData[1].provider[0]
					uni.login({
						provider: provider,
					}).then(codeData=>{
						let code = codeData[1].code
						this.addCommentHandle({
							...this.commentData,
							'content': this.rebackContent,
							code
						})
					})
				})
			},
			addCommentHandle(data) {
				addComment(data).then(res => {
					if (res.code === 200) {
						this.keywords = ""
						// 父组件需重新加载
						uni.$emit('getCommentList', data.blogId)
						this.showpop = false
						// 跳转至详情
						// uni.navigateTo({
						// 	url: `/pages/forum/detail/blogDetail?id=${this.item.id}`
						// })
					}
				}).catch(err=>{
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
			},
			likeCommentHandle(comment) {
				const isCurrentlyLiked = comment.isLike;

				likeComment(comment.answerId).then(res => {
					if (res.code === 200) {
						comment.isLike = !isCurrentlyLiked;
						if (comment.isLike) {
							comment.liked += 1;
						} else {
							comment.liked = Math.max(comment.liked - 1, 0);
						}
						uni.$emit('getCommentList', comment.blogId)
						uni.showToast({
							icon: "none",
							title: res.message,
						});
					}
				}).catch(error => {
					console.error("点赞失败：", error);
					uni.showToast({
						icon: "none",
						title: "点赞失败，请重试",
					});
				});
			},
			Timeformat(isoTimeStr) {
				const date = new Date(isoTimeStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} 发布`;
			},
			// 点赞评论
			reportComment(val){
				wx.showModal({
					title: '你确定要举报该条评论吗？',
					success: (res) => {
						if (!res.confirm) return
						wx.showLoading()
						reportCommentById(val.answerId).then(res => {
							uni.$emit('getCommentList', val.blogId)
							wx.showToast({
								title: res.message
							})
							wx.hideLoading()
						})
					}
				})
			},
			deleteComment(val){
				wx.showModal({
					title: '你确定要删除该条评论吗？',
					success: (res) => {
						if (!res.confirm) return
						wx.showLoading()
						deleteCommentById(val.answerId).then(res => {
							uni.$emit('getCommentList', val.blogId)
							wx.showToast({
								title: res.message
							})
							wx.hideLoading()
						})
					}
				})
			},
			handleShowPop(item) {
				this.popItem = item
				this.showpop = true
			},
			init(id) {
				getComments(id).then(res => {
					this.params.list = res.data
					this.answerData.blogId = id
				})
			},
			// 帖子发布时间显示修正
			modifyTime(data) {
				let time = data.split("T")
				return time[0] + " " + time[1]
			},
			likeIt(item) {
				likeComment(item.answerId).then(res => {
					if (res.message == "点赞成功") {
						uni.showToast({
							icon: "none",
							title: "点赞成功",
						})
						item.liked += 1;
						item.isLike = true;
					} else if (res.message == ("取消点赞成功")) {
						uni.showToast({
							title: "取消点赞成功",
							icon: "none",
						})
						item.liked -= 1;
						item.isLike = false;
					}
				})
			},
			// 弹出评论输入框遮罩
			answerIt(item) {
				this.inputShow = true;
				this.answerData.parentId = item.answerId;
			},
			// 关闭评论输入框遮罩
			inputClose() {
				this.inputShow = false;
			},
			// 发送评论
			sendAnswer(item) {
				// 判断评论内容是否为空
				if (this.answerData.content == "") {
					uni.showToast({
						title: "请输入评论内容！",
						icon: "none",
					});
				} else {
					addComment(this.answerData).then(res => {
						uni.showToast({
							title: "评论成功",
							icon: "none",
						});
						this.inputClose();
						// this.goBolgDetail(this.answerData.blogId);
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index_blog:first-child {
		margin-top: 0;
	}
	
		.edit{
			position: absolute;
			top: 20rpx;
			right: 100rpx;
		}
		
		.user_container {
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.user_avatar {
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				// background-color: #ccc;
				// border: 1px solid #ccc;
				border-radius: 50%;
			}
	
			.user_info {
				margin-left: 20rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				row-gap: 10px;
	
				.title {
					display: flex;
					letter-spacing: 0.1rem;
	
					.title_info {
						font-size: 1.2rem;
						color: #f86f5c;
					}
	
					.title_square {
						padding: 10rpx 20rpx;
						background-color: #fb7299;
						margin-left: 20rpx;
						border-radius: 10rpx;
						color: #fff;
						font-size: 1rem;
					}
	
					.cancel_square {
						padding: 10rpx 20rpx;
						background-color: #fb7299;
						margin-left: 20rpx;
						border-radius: 10rpx;
						color: #fff;
						font-size: 1rem;
					}
	
	
				}
	
	
			}
		}
	
		.time_square {
			color: #adadad;
			letter-spacing: 0.125rem;
		}
	
		.popContent {
			margin: 50rpx 10rpx;
			display: flex;
			// flex-wrap: wrap;
			flex-direction: column;
			// align-items: flex-end;
			// row-gap: 20rpx;

	
			::v-deep .u-textarea__field {
				// font-size: 1.85rem !important;
			}
			::v-deep .uicon-close{
				font-size: 18px;
			}
		}
		.pop ::v-deep .uicon-close{
				font-size: 18px !important;
			}
		
	
		.comment_index_container {
			margin: 40rpx 0;
		}
	
		.posts_index {
			padding: 30rpx 0 0 0;
			position: relative;
			
			.edit{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
	
			.posts_title {
				font-size: 1.25rem;
				margin: 0 0 20rpx 0;
			}
	
			.posts_content {
				font-size: 1rem;
				letter-spacing: 0.12rem;
				line-height: 1.4rem;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
	
			.album__content {
				margin: 20rpx 0 0 0;
				width: 100%;
	
				.u-album .u-album__row .u-album__row__wrapper img {
					width: 100px !important;
					height: 100px !important;
				}
	
				.album {
					@include flex;
					align-items: flex-start;
	
					&__avatar {
						background-color: $u-bg-color;
						padding: 5px;
						border-radius: 3px;
					}
	
					&__content {
						margin-left: 10px;
						flex: 1;
					}
	
					&__row image {
						width: 200rpx;
					}
				}
			}
	
			.comment_index {
				margin: 30rpx 0 0 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.ipt_square {
	
					margin-left: 20rpx;
					width: 100%;
				}
			}
	
			.action_index {
				margin: 20rpx 0 0 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
	
				.item_action {
					display: flex;
					column-gap: 10px;
				}
			}
	
			.comment_second {
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 20rpx 40rpx 0 40rpx;
	
				.user_commentcontent {
					justify-content: flex-start;
					align-items: center;
					display: flex;
	
					view {
						padding: 0 20rpx;
					}
				}
			}
	}
</style>